<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
	</head>
	<body class="pear-container">
		<div class="layui-row layui-col-space10">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-header">开发环境</div>
					<div class="layui-card-body">
						Tag 标签组件
					</div>
				</div>
			</div>

			<div class="layui-col-md12">
				<div class="layui-collapse">
					<div class="layui-colla-item">
						<h2 class="layui-colla-title">显示代码</h2>
						<div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
								<link rel="stylesheet" href="component/pear/css/pear.css" />
								 并
								<script src="component/layui/layui.js"></script>
								 并
								<script src="component/pear/pear.js"></script>
							</pre>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-header">主题风格</div>
					<div class="layui-card-body">
						<div class="layui-btn-container tag">
							<button lay-id="11" type="button" class="tag-item tag-item-normal">网站设置</button>
							<button lay-id="22" type="button" class="tag-item">用户管理</button>
							<button lay-id="33" type="button" class="tag-item tag-item-warm">权限分配</button>
							<button lay-id="44" type="button" class="tag-item tag-item-danger">商品管理</button>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-md12">
				<div class="layui-collapse">
					<div class="layui-colla-item">
						<h2 class="layui-colla-title">显示代码</h2>
						<div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
							<div class="layui-btn-container tag">
							    <button lay-id="11" type="button" class="tag-item tag-item-normal">网站设置</button>
							    <button lay-id="22" type="button" class="tag-item">用户管理</button>
							    <button lay-id="33" type="button" class="tag-item tag-item-warm">权限分配</button>
							    <button lay-id="44" type="button" class="tag-item tag-item-danger">商品管理</button>
							</div>
							</pre>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-header">动态操作</div>
					<div class="layui-card-body">
						<div class="layui-btn-container tag" lay-filter="demo" lay-allowclose="true" lay-newTag="true">
							<button lay-id="11" type="button" class="tag-item tag-item-normal">网站设置</button>
							<button lay-id="22" type="button" class="tag-item">用户管理</button>
							<button lay-id="33" type="button" class="tag-item tag-item-warm">权限分配</button>
							<button lay-id="44" type="button" class="tag-item tag-item-danger">商品管理</button>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-md12">
				<div class="layui-collapse">
					<div class="layui-colla-item">
						<h2 class="layui-colla-title">显示代码</h2>
						<div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
								tag.add('demo', {text: '新选项',id: 12})
								 
								tag.delete('demo', '44');
							</pre>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-header">圆角风格</div>
					<div class="layui-card-body">
						<div class="layui-btn-container tag" lay-filter="test" lay-newTag="true">
							<button lay-id="11" type="button" class="tag-item">网站设置</button>
							<button lay-id="22" type="button" class="tag-item">用户管理</button>
							<button lay-id="33" type="button" class="tag-item">权限分配</button>
							<button lay-id="44" type="button" class="tag-item">商品管理</button>
						    <button lay-id="55" type="button" class="tag-item">订单管理</button>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-md12">
				<div class="layui-collapse">
					<div class="layui-colla-item">
						<h2 class="layui-colla-title">显示代码</h2>
						<div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
								<div class="layui-btn-container tag" lay-filter="test" lay-newTags="true">
								    <button lay-id="11" type="button" class="tag-item">网站设置</button>
								    <button lay-id="22" type="button" class="tag-item">用户管理</button>
								    <button lay-id="33" type="button" class="tag-item">权限分配</button>
								    <button lay-id="44" type="button" class="tag-item">商品管理</button>
								    <button lay-id="55" type="button" class="tag-item">订单管理</button>
								</div>
							</pre>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-header">删除功能</div>
					<div class="layui-card-body">
						<div class="layui-btn-container tag" lay-allowclose="true">
							<button lay-id="11" type="button" class="tag-item tag-item-danger">网站设置</button>
							<button lay-id="22" type="button" class="tag-item tag-item-danger">用户管理</button>
							<button lay-id="33" type="button" class="tag-item tag-item-danger">权限分配</button>
							<button lay-id="44" type="button" class="tag-item tag-item-danger">商品管理</button>
							<button lay-id="55" type="button" class="tag-item tag-item-danger">订单管理</button>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-md12">
				<div class="layui-collapse">
					<div class="layui-colla-item">
						<h2 class="layui-colla-title">显示代码</h2>
						<div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
								<div class="layui-btn-container tag" lay-allowclose="true">
								    <button lay-id="11" type="button" class="tag-item tag-item-danger">网站设置</button>
								    <button lay-id="22" type="button" class="tag-item tag-item-danger">用户管理</button>
								    <button lay-id="33" type="button" class="tag-item tag-item-danger">权限分配</button>
								    <button lay-id="44" type="button" class="tag-item tag-item-danger">商品管理</button>
								</div>
								  
								tag.on('delete(demo)', function(data) {
								    console.log('删除');
								    console.log(this); 
								    console.log(data.index);
								    console.log(data.elem);
								    console.log(data.othis);
								});
							</pre>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-header">新建功能</div>
					<div class="layui-card-body">
						<div class="layui-btn-container tag" lay-newTag="true">
							<button lay-id="11" type="button" class="tag-item">网站设置</button>
							<button lay-id="22" type="button" class="tag-item">用户管理</button>
							<button lay-id="33" type="button" class="tag-item">权限分配</button>
							<button lay-id="44" type="button" class="tag-item">商品管理</button>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-md12">
				<div class="layui-collapse">
					<div class="layui-colla-item">
						<h2 class="layui-colla-title">显示代码</h2>
						<div class="layui-colla-content">
							<pre class="layui-code" lay-encode="true">
							<div class="layui-btn-container tag" lay-newTags="true">
							    <button lay-id="11" type="button" class="tag-item">网站设置</button>
							    <button lay-id="22" type="button" class="tag-item">用户管理</button>
							    <button lay-id="33" type="button" class="tag-item">权限分配</button>
							    <button lay-id="44" type="button" class="tag-item">商品管理</button>
							</div>
							  
							tag.on('add(demo)', function(data) {
							    console.log('新建');
							    console.log(this); 
							    console.log(data.index); 
							    console.log(data.elem); 
							});
							</pre>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="../../component/layui/layui.js"></script>
		<script src="../../component/pear/pear.js"></script>
		<script>
			layui.use(['tag', 'code', 'element'], function() {
				var $ = layui.jquery,
					tag = layui.tag; //Tag的切换功能，切换事件监听等，需要依赖tag模块

				layui.code();

				tag.render("test", {
					skin: 'layui-btn layui-btn-primary layui-btn-sm layui-btn-radius', //标签样式
					tagText: '<i class="layui-icon layui-icon-add-1"></i>添加标签' //标签添加按钮提示文本
				});

				var active = {
					tagAdd: function() {
						//新增一个Tag项
						tag.add('demo', {
							text: '新选项' + (Math.random() * 1000 | 0) //用于演示
								,
							id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
						})
					},
					tagDelete: function(othis) {
						//删除指定Tag项
						tag.delete('demo', '44'); //删除：“商品管理”
						othis.addClass('layui-btn-disabled');
					}
				};

				$('.site-demo-active').on('click', function() {
					var othis = $(this),
						type = othis.data('type');
					active[type] ? active[type].call(this, othis) : '';
				});

				tag.on('click(demo)', function(data) {
					console.log('点击');
					console.log(this); //当前Tag标签所在的原始DOM元素
					console.log(data.index); //得到当前Tag的所在下标
					console.log(data.elem); //得到当前的Tag大容器
				});

				tag.on('add(demo)', function(data) {
					console.log('新增');
					console.log(this); //当前Tag标签所在的原始DOM元素
					console.log(data.index); //得到当前Tag的所在下标
					console.log(data.elem); //得到当前的Tag大容器
					console.log(data.othis); //得到新增的DOM对象
					//return false; //返回false 取消新增操作； 同from表达提交事件。
				});

				tag.on('delete(demo)', function(data) {
					console.log('删除');
					console.log(this); //当前Tag标签所在的原始DOM元素
					console.log(data.index); //得到当前Tag的所在下标
					console.log(data.elem); //得到当前的Tag大容器
				});
			});
		</script>
	</body>
</html>
